﻿<!DOCTYPE html>
<html>
<!-- MSDS数据库-编辑 -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <script src="/static/js/wangEditor.min.js" type="text/javascript"></script>
    <link href="/static/js/wangEditor.min.css" rel="stylesheet" />
    <style>

        .popupW100 .inputTextarea .el-form-item__content {
            margin-left: 0px !important;
        }

        body {
            padding-bottom: 10px;
        }
        .el-form-item__content {
            line-height: 1.2 !important;
            margin-top: 6px;
        }

        .el-form-item__label {
            text-align: right !important;
            padding-right: 20px !important;
        }

        .yangshi1 {
            font-weight: bold
        }
    </style>
</head>

<body>
    <div id="app" class="popupW150" v-cloak>
        <el-form label-position="right" :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="150px"
                 size="mini">

            <el-row style="margin-bottom:8px" >
                <el-col :span="24" style=" text-align:center" class="yangshi1">
                    安全技术说明书
                </el-col>
                <el-col :span="24" style=" text-align:center ; border:1px solid ">
                    说明书目录
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                  第一部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    <a href="#diyi"> 化学名称</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                   第九部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px">
                    <a href="#dijiubufen">    理化特性</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第二部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    <a href="#dierbufen">  成分/组成信息</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第十部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px">
                    <a href="#dishibufen"> 稳定性与反应活性</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第三部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    <a href="#disanbufen">危险性概述</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第十一部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px">
                    <a href="#dishiyibufen"> 毒理学资料</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第四部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    <a href="#disibufen">  急救措施</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第十二部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px">
                    <a href="#dishierbufen">生态学资料</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第五部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    <a href="#diwubufen">消防措施</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第十三部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px">
                    <a href="#dishisanbufen">废弃处置</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                  第六部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    <a href="#diliubufen">   泄露应急处理</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第十四部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px">
                    <a href="#dishisibufen">   运输信息</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第七部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    <a href="#diqibufen">   操作处置与存储</a>
                </el-col>

                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第十五部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px">
                    <a href="#dishiwubufen">  法规信息</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第八部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    <a href="#dibabufen"> 接触控制/个体防护</a>
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px;border-right:0px">
                    第十六部分
                </el-col>
                <el-col :span="6" style=" text-align:center ; border:1px solid; border-top: 0px">
                    <a href="#dishiliubufen">  其他信息</a>
                </el-col>
            </el-row>
            

            <el-row style="margin-bottom:8px" id="diyi">
                <el-col :span="24" class="yangshi1">
                    第一部分：化学名称
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item prop="ChemicalChineseName" :label="MSDSdatabase.ChemicalChineseName+mark.m">
                            {{Form.ChemicalChineseName}}
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="1">
                    <el-form-item prop="ChemicalName" :label="MSDSdatabase.ChemicalName+mark.m">
                        {{Form.ChemicalName}}
                    </el-form-item>
                </el-col>
                <el-col :span="11">

                    <el-form-item prop="ChemicalEnglishName" :label="MSDSdatabase.ChemicalEnglishName+mark.m">
                        {{Form.ChemicalEnglishName}}
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                    <el-form-item prop="EnglishName" :label="MSDSdatabase.EnglishName+mark.m">
                        {{Form.EnglishName}}
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item prop="SpecificationCode" :label="MSDSdatabase.SpecificationCode+mark.m">
                        {{Form.SpecificationCode}}
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                    <el-form-item prop="CASNo" :label="MSDSdatabase.CASNo+mark.m">
                        {{Form.CASNo}}
                    </el-form-item>
                </el-col>

                <el-col :span="11">
                    <el-form-item :label="MSDSdatabase.ManufacturerName+mark.m" prop="ManufacturerName">
                        {{Form.ManufacturerName}}
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                    <el-form-item :label="MSDSdatabase.EffectiveDate+mark.m" prop="EffectiveDate">
                        {{Form.EffectiveDate}}

                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="MSDSdatabase.Address+mark.m" prop="Address">
                        {{Form.Address}}
                    </el-form-item>
                </el-col>
            </el-row>

            <div id="editorBox">
            </div>

            <el-row type="flex" justify="end">
                <el-form-item>
                    <!--<el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>-->
                    <!-- <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}</el-button> -->
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
    <script type="text/javascript">
        var E = window.wangEditor
        var app = new Vue({
            el: '#app',
            data: {
                value1: '',
                radio: '1',
                CompositionInformation: "",
                RiskOverview: '',//危险性概述
                First_aid: '',//急救措施
                Fire_fightingMeasures: '',//消防措施
                LeakageEmergencyTreatment: '',//泄露应急处理
                HandlinStorage: '',//操作处置与存储
                ContactControlpersonalProtection: '',//接触控制/个体防护
                ChemicalProperties: '',//理化特性
                StabilityAndReactivity: '',//稳定性与反应活性
                ToxicologicalInformation: '',//毒理学资料
                EcologicalInformation: '',//生态学资料
                Disposal: '',//废弃处置
                TransportInformation: '',//运输信息
                RegulatoryInformation: '',//法规信息
                OtherInformation: '',//其他信息
                maodian: {
                    CompositionInformation: 'dierbufen',
                    RiskOverview: 'disanbufen',//危险性概述
                    First_aid: 'disibufen',//急救措施
                    Fire_fightingMeasures: 'diwubufen',//消防措施
                    LeakageEmergencyTreatment: 'diliubufen',//泄露应急处理
                    HandlinStorage: 'diqibufen',//操作处置与存储
                    ContactControlpersonalProtection: 'dibabufen',//接触控制/个体防护
                    ChemicalProperties: 'dijiubufen',//理化特性
                    StabilityAndReactivity: 'dishibufen',//稳定性与反应活性
                    ToxicologicalInformation: 'dishiyibufen',//毒理学资料
                    EcologicalInformation: 'dishierbufen',//生态学资料
                    Disposal: 'dishisanbufen',//废弃处置
                    TransportInformation: 'dishisibufen',//运输信息
                    RegulatoryInformation: 'dishiwubufen',//法规信息
                    OtherInformation: 'dishiliubufen',//其他信息
                },
                name: {
                    CompositionInformation: '第二部分：成分/组成信息',
                    RiskOverview: '第三部分：危险性概述',//危险性概述
                    First_aid: '第四部分：急救措施',//急救措施
                    Fire_fightingMeasures: '第五部分：消防措施',//消防措施
                    LeakageEmergencyTreatment: '第六部分：泄露应急处理',//泄露应急处理
                    HandlinStorage: '第七部分：操作处置与存储',//操作处置与存储
                    ContactControlpersonalProtection: '第八部分：接触控制/个体防护',//接触控制/个体防护
                    ChemicalProperties: '第九部分：理化特性',//理化特性
                    StabilityAndReactivity: '第十部分：稳定性与反应活性',//稳定性与反应活性
                    ToxicologicalInformation: '第十一部分：毒理学资料',//毒理学资料
                    EcologicalInformation: '第十二部分：生态学资料',//生态学资料
                    Disposal: '第十三部分：废弃处置',//废弃处置
                    TransportInformation: '第十四部分：运输信息',//运输信息
                    RegulatoryInformation: '第十五部分：法规信息',//法规信息
                    OtherInformation: '第十六部分：其他信息',//其他信息
                },
                list: {
                    CompositionInformation: '',
                    RiskOverview: '',//危险性概述
                    First_aid: '',//急救措施
                    Fire_fightingMeasures: '',//消防措施
                    LeakageEmergencyTreatment: '',//泄露应急处理
                    HandlinStorage: '',//操作处置与存储
                    ContactControlpersonalProtection: '',//接触控制/个体防护
                    ChemicalProperties: '',//理化特性
                    StabilityAndReactivity: '',//稳定性与反应活性
                    ToxicologicalInformation: '',//毒理学资料
                    EcologicalInformation: '',//生态学资料
                    Disposal: '',//废弃处置
                    TransportInformation: '',//运输信息
                    RegulatoryInformation: '',//法规信息
                    OtherInformation: '',//其他信息
                },
                // picked : '1',
                //父业传参
                id: '',

                //业务表单内容
                Form: {
                    id: guidEmpty,
                    ChemicalChineseName: "",
                    ChemicalEnglishName: "",
                    ChemicalName: "",
                    EnglishName: "",
                    CASNo: "",
                    SpecificationCode: "",
                    ManufacturerName: "",
                    Address: "",
                    EffectiveDate: "",
                    Dateofaddition: "",
                    Addpeople: "",
                    CompositionInformation: '',//成分/组成信息
                    RiskOverview: '',//危险性概述
                    First_aid: '',//急救措施
                    Fire_fightingMeasures: '',//消防措施
                    LeakageEmergencyTreatment: '',//泄露应急处理
                    HandlinStorage: '',//操作处置与存储
                    ContactControlpersonalProtection: '',//接触控制/个体防护
                    ChemicalProperties: '',//理化特性
                    StabilityAndReactivity: '',//稳定性与反应活性
                    ToxicologicalInformation: '',//毒理学资料
                    EcologicalInformation: '',//生态学资料
                    Disposal: '',//废弃处置
                    TransportInformation: '',//运输信息
                    RegulatoryInformation: '',//法规信息
                    OtherInformation: '',//其他信息

                },
                //表单验证
                rules: {
                    Country: [
                        verification.NotNull,
                    ],
                    Productname: [
                        verification.NotNull,
                    ],
                    company: [
                        verification.NotNull,
                    ],


                }
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                getData: function () {
                    getData(this, '/api/MSDSdatabase/get?id=' + this.id);
                },
            },
            mounted: function () {
                this.id = getUrlParam("id");
                this.getData();
               
                var list = this.list;
                var name = this.name
                var maodian = this.maodian
                for (var key in list) {
                    $("#editorBox").append('<el-row style="margin-bottom:8px" class="yangshi1" id="' + maodian[key] + '"> <el-col :span = "24" >' + name[key]
                        + '</el-col ></el-row ><el-row><el-col : span="24"><el-form-item class="inputTextarea"><div id="'
                        + key + '" style="margin-bottom:10px;">' + this.Form[key] + '</div></el-form-item></el-col></el-row>')
                }

                //列表高度自适应
                tablehigh(this);

            },

        });
    </script>
</body>

</html>